<!--
 * @Author: YWY
 * @Date: 2022-03-02 11:22:03
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-06 19:01:46
-->
<!--
 * @Author: YWY
 * @Date: 2022-02-23 11:40:38
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-03 20:22:18
-->
<template>
  <div class="userpage">
    <button class="userpage_return" @click="returnBtn">
      <van-icon name="arrow-left"></van-icon>返回
    </button>
    <button class="addfollow" @click="other.addFollow(id)" v-if="!followed">
      关注
    </button>
    <button class="disfollow" @click="other.disFollow(id)" v-if="followed">
      取消关注
    </button>
    <div>
      <img :src="avatar" alt="" class="userImg" @click="showPreview" />
      <p>{{ name }}</p>
      <div class="userpage_count">
        <div class="userpage_count_box">
          <p>{{ follows.length }}</p>
          <p>关注</p>
        </div>
        <div class="userpage_count_fans">
          <p>{{ fans.length }}</p>
          <p>粉丝</p>
        </div>
        <div class="userpage_count_box">
          <p>{{ likes }}</p>
          <p>收到的赞</p>
        </div>
      </div>
    </div>

    <van-collapse v-model="mainActiveName" accordion>
      <!-- TA的资料 -->
      <van-collapse-item title="TA的资料" name="1">
        <!-- 用户名 -->
        <div class="User_info">
          <p>用户名:</p>
          <p>{{ name }}</p>
        </div>

        <!-- 性别 -->
        <div class="User_info">
          <p>性别:</p>
          <p>{{ sex }}</p>
        </div>
        <!-- 城市 -->
        <div class="User_info">
          <p>城市:</p>
          <p>{{ city }}</p>
        </div>
      </van-collapse-item>
      <!-- TA的文章 -->
      <van-collapse-item title="TA的文章" name="2">
        <post-cell-in-user
          v-for="item in article"
          :key="item.id"
          :title="item.title"
          :author="item.user_name"
          :postTime="item.postTime"
          :likes="item.likes"
          :replies="item.comments"
          :visits="item.visits"
          :createdAt="item.createdAt"
          :updatedAt="item.updatedAt"
          :cover_url="item.cover_url"
          :content="item.content"
          :cover="item.cover_url"
          @click="toAritclePage(item.id)"
        ></post-cell-in-user>
        <div v-if="!article.length">TA没有写过文章</div>
      </van-collapse-item>
      <!-- TA的关注 -->
      <van-collapse-item title="TA的关注" name="4">
        <div v-for="item in follows" :key="item.id" class="user_fans_cell">
          <img :src="item.follow_pic" alt="" class="user_fans_avatar" />
          <p>{{ item.follow_name }}</p>
        </div>
        <div v-if="!follows.length">TA还没有关注</div>
      </van-collapse-item>
      <van-collapse-item title="TA的粉丝" name="5">
        <div
          v-for="item in fans"
          :key="item.id"
          class="user_fans_cell"
          @click="toUserPage(item.id)"
        >
          <img :src="item.img" alt="" class="user_fans_avatar" />
          <p>{{ item.user_name }}</p>
        </div>
        <div v-if="!fans.length">TA还没有粉丝</div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
import PostCellInUser from "@/components/PostCellInUser.vue";
import { Toast, ImagePreview } from "vant";
import { useRouter } from "vue-router";
import { otherUserStore } from "@/store/otherUserData.js";
import { getUserData } from "../api/services/user.service";
import { storeToRefs } from "pinia";

export default defineComponent({
  name: "otherUserPage",
  components: {
    PostCellInUser,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  props: ["id"],
  setup(props) {
    const router = useRouter();
    const other = otherUserStore();
    const {
      name,
      sex,
      city,
      avatar,
      article,
      favorite,
      follows,
      followed,
      fans,
      likes,
    } = storeToRefs(other);
    const mainActiveName = ref("1");

    //页面信息获取
    other.init(props.id);

    //返回按钮
    const returnBtn = () => {
      window.history.back();
    };

    // 头像预览
    const showPreview = () => {
      ImagePreview({
        images: [avatar.value],
        closeable: true,
      });
    };

    //去用户页
    const toUserPage = (id) => {
      router.push(`/others/${id}`);
    };

    //去文章页
    const toAritclePage = (id) => {
      router.push(`/article/${id}`);
    };
    return {
      other,
      mainActiveName,
      avatar,
      city,
      sex,
      name,
      article,
      favorite,
      fans,
      follows,
      followed,
      likes,
      returnBtn,
      showPreview,
      toAritclePage,
      toUserPage,
    };
  },
});
</script>
<style lang='less'>
@rgb1:~ 'white';
@rgb2:~ '#dee1e6';
.addfollow,
.disfollow {
  position: absolute;
  font-size: 12px;
  top: 15px;
  right: 15px;
  border: none;
  color: gray;
  background-color: #dee1e6;
  border-radius: 5px;
  padding: 4px 10px;
  box-shadow: 0 0 2px 1px gray;
}
.user_dataSave {
  font-size: 12px;
  border: none;
  color: gray;
  background-color: #dee1e6;
  border-radius: 5px;
  padding: 4px 10px;
  box-shadow: 0 0 2px 1px gray;
  z-index: 11;
  position: absolute;
  width: 50px;
  height: 30px;
  line-height: 12px;
  right: 10px;
  top: 50px;
}
.userImg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 2px 1px gray;
  margin-top: 50px;
  background-color: white;
}
.userpage {
  background-color: rgb(227, 238, 255);
  height: 100vh;
  width: 100vw;
  .userpage_return {
    position: absolute;
    font-size: 16px;
    top: 14px;
    left: 7px;
    border: none;
    color: gray;
    background-color: transparent;
    border-radius: 5px;
  }
  .User_info {
    display: flex;
    padding-left: 18px;
    // border: 1px solid black;
    :nth-child(1) {
      width: 100px;
      text-align: left;
    }
  }
  .van-grid {
    padding: 5px;
    border-radius: 15px;
    background-color: white;
  }
  .van-collapse-item {
    box-shadow: 0 0 1px;
  }
  .van-collapse-item__title--expanded {
    background-color: rgb(235, 235, 235);
  }
  .van-cell {
    z-index: 10;
  }
  .userpage_count {
    display: flex;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0 0 1px 0 gray;
    .userpage_count_box {
      margin: 0 20px;
      flex: 0 100px;
      p {
        text-align: center;
        // border: 1px solid black;
        color: rgb(150, 151, 153);
      }
    }
    .userpage_count_fans {
      flex: 1;
      margin: 0 20px;
      p {
        text-align: center;
        // border: 1px solid black;
        color: rgb(150, 151, 153);
      }
    }
  }
  .user_fans_cell {
    display: flex;
    // border: 1px solid black;
    justify-content: space-between;
    width: 250px;
    margin: 10px auto;
    align-items: center;
    .user_fans_avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      // border: 1px solid black;
    }
    p {
      flex: 0 100px;
      text-align: left;
      // border: 1px solid black;
    }
  }
}
</style>